<template>
	<view class="overflow-hidden">
		<image style="height: 732rpx;" class="w-full" src="@/static/images/share.png"></image>
		<view class="mx-60 mt--140 py-40 bg-white rounded relative" style="position: relative;margin-top: 140rpx;">
			<view class="text-center font-42 font-medium">简单三步 立得佣金</view>
			<view class="flex mt-30">
				<view class="flex-1 text-center">
					<image src="@/static/images/share_1.png" style="width: 88rpx;height: 88rpx;"></image>
					<view>分享连接</view>
				</view>
				<image src="@/static/images/share_arrow.png" style="width: 48rpx;height: 17rpx;" class="mt-40"></image>
				<view class="flex-1 text-center">
					<image src="@/static/images/share_3.png" style="width: 88rpx;height: 88rpx;"></image>
					<view>好友注册</view>
				</view>
				<image src="@/static/images/share_arrow.png" style="width: 48rpx;height: 17rpx;" class="mt-40"></image>
				<view class="flex-1 text-center">
					<image src="@/static/images/share_3.png" style="width: 88rpx;height: 88rpx;"></image>
					<view>下单返利</view>
				</view>
			</view>
			<view class="mx-20 mt-20">
				<u-button @click="onShare" style="background: #f0ad4e;color: #fff;">点击此按钮 复制分享链接 赚取佣金</u-button>
			</view>
		</view>
		<view class="mx-60 mt-40 py-40 bg-white rounded relative z-1">
			<view class="text-center font-42 font-medium">返利说明</view>
			<view class="font-20 text-60 px-40">邀请好友成功注册后，你将获得TA每次购物订单金额5%的佣金奖励，可在我的钱包内查询佣金余额，佣金可以用于购买商城物品或在我的钱包内进行提现。</view>
		</view>
		<template>
			<view class="mx-30 bg-fa relative z-0 rounded-top" style="padding-top: 110rpx; margin-top: -110rpx;">
			</view>
			<view class="mx-28 relative z-1" style="margin-top: -50rpx;">
				<image src="@/static/images/share_card.png" style="width: 100%;height: 112rpx;" class="block"></image>
			</view>
		</template>

		<!-- Begin 我的收益 -->
		<view class="mx-30 my-40 py-40 bg-white rounded">
			<view class="text-center">
				<view class="font-30 relative z-1">我的收益</view>
				<view class="bg-orange rounded mx-auto relative" style="margin-top: -24rpx; height: 18rpx;width: 100px;"></view>
			</view>
			<view class="flex mt-16">
				<view @click="activeIndex=0" :class="{'text-red':activeIndex===0}" class="text-center flex-1">
					<text class="font-40 font-medium">{{teamCount}}</text><text class="font-18 font-medium">人</text>
					<text class="block font-18 font-medium">普通下级</text>
				</view>
				<view class="line-column"></view>
				<view @click="activeIndex = 1" :class="{'text-red':activeIndex===1}" class="text-center flex-1">
					<text class="font-40 font-medium">{{orderCount}}</text><text class="font-18 font-medium">人</text>
					<text class="block font-18 font-medium">储蓄下级</text>
				</view>
			</view>
			<view v-show="activeIndex===0" class="px-20 mt-40">
				<view class="flex text-center">
					<view class="flex-1 font-30 font-medium">用户昵称</view>
					<view class="flex-1 font-30 font-medium">消费费用</view>
					<view class="flex-1 font-30 font-medium">手机号</view>
				</view>
				<view v-for="(item,index) in teamList">
					<view class="mt-24 flex text-center">
						<view class="flex-1 font-30 font-medium hide-name">{{item.name}}</view>
						<view class="flex-1 font-30 font-medium">{{item.consumptionPrice}}</view>
						<view class="flex-1 font-30 font-medium">{{$ut.formatPhone(item.phone)}}</view>
					</view>
				</view>
			</view>
			<view v-show="activeIndex===1" class="px-20 mt-40">
				<view class="flex text-center">
					<view class="flex-1 font-30 font-medium">用户昵称</view>
					<view class="flex-1 font-30 font-medium">消费费用</view>
					<view class="flex-1 font-30 font-medium">手机号</view>
				</view>
				<view v-for="(item,index) in orderList" class="flex text-center">
					<view class="mt-24 flex text-center">
						<view class="flex-1 font-30 font-medium hide-name">{{item.name}}</view>
						<view class="flex-1 font-30 font-medium">{{item.consumptionPrice}}</view>
						<view class="flex-1 font-30 font-medium">{{$ut.formatPhone(item.phone)}}</view>
					</view>
				</view>
			</view>

		</view>
		<!-- End 我的收益 -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				orderList: [],
				orderCount: 0,
				teamList: [],
				teamCount: 0,
				activeIndex: 0
			}
		},
		onLoad() {
			this.getPromotionUserInfo();
			this.getSavePromotionUserInfo();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			// 获取用户推广的用户
			getPromotionUserInfo() {
				this.$u.api.getPromotionUserInfo({
					id: this.userInfo.id
				}).then(res => {
					this.teamList = res.dataList;
					this.teamCount = res.total;
				})
			},
			// 获取用户推广的用户
			getSavePromotionUserInfo() {
				this.$u.api.getSavePromotionUserInfo({
					id: this.userInfo.id
				}).then(res => {
					this.orderList = res.dataList;
					this.orderCount = res.total;
				})
			},
			onShare() {
				// #ifdef H5
				const origin = window.location.origin;
				const router = 'pages/public/login';
				const query = this.userInfo.id;
				// #endif
				uni.setClipboardData({
					data: `${origin}/#/${router}?id=${query}`,
					showToast: false,
					success() {
						uni.showModal({
							title: "复制成功",
							content: "快去分享赚钱吧！\n注：在各大平台私信发此链接时、由于平台管控，一分钟内请勿私发超过两次该链接、否则平台系统会判定为恶意发送垃圾消息，导致账号屏蔽私发功能，每次发送此链接时都可以在粘贴以后添加不同表情或者字母，这样平台系统将不会判定此消息为机器恶意发送。",
							showCancel: false
						})
					}
				});
			},
			hideName(name) {
				return name[0] + "***"
			},
			date(timestamp) {
				// return dayjs.unix(timestamp).format("YYYY-MM-DD")
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}

	.hide-name {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>